class Element{
    constructor(type, props, children) {
        this.type = type 
        this.props = props
        this.children = children
    }
}

function createElement(type, props, children) {
    return new Element(type, props, children)
}

function setAttr(node, key, value) {
    switch (key) {
        case 'value': // <input value="123"/>
            if(node.tagName.toUpperCase() === 'INPUT' || node.tagName.toUpperCase() === 'TEXTARE') {
                node.key = value
            } else {
                node.setAttribute(key,value)
            }
            break;
        case 'style':
            node.style.cssText = value
            break;
        default:
            node.setAttribute(key, value)
            break;
    }
}

// 将vnode转化为真实dom
function render(eleObj) {
    let el = document.createElement(eleObj.type)
    for (let key in eleObj.props) {
        // 设置属性的方法
        setAttr(el, key, eleObj.props[key])
    }
    eleObj.children.forEach(child => {
        child = (child instanceof Element) ? render(child) :  document.createTextNode(child)
        el.appendChild(child)
    });
    return el
}

function renderDom(el, target) {
    target.appendChild(el)
}

export {createElement, render, renderDom, Element, setAttr}